<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../src/lib/jquery.js"></script>
    <script src="lib/jquery.ui.widget.js"></script>
    <script src="lib/jquery.iframe-transport.js"></script>
    <script src="lib/jquery.fileupload.js"></script>

    <style>
        .bar {
            height: 18px;
        }
    </style>
</head>
<body>

    <!--<input id="fileupload" type="file" accept="image/jpg,image/jpeg,image/png" data-url="http://127.0.0.1/demo2.php">-->

    <input id="fileupload" type="file" name="file[]" multiple data-url="http://127.0.0.1/demo2.php">

    <progress id="progress" class="pro-val" value="0" max="100"></progress>
    <span class="bar">点击</span>

    <script>

        $(function () {
            $('#fileupload').fileupload({
                dataType: '',
                type:'post',
                /*add: function (e, data) {
                    /!*data.context = $('<button/>').text('Upload')
                            .appendTo(document.body)
                            .click(function () {
                                $(this).replaceWith($('<p/>').text('Uploading...'));
                                data.submit();
                            });*!/

                    $('.bar').click(function(){

                        data.submit();
                    })
                },*/
                done: function (e, data) {
                    alert(111)
                    data.context.text('Upload finished.');
                },
                fail :function(error){

                    console.log(error)
                },
                always:function(error){
                    console.log(error)
                },
                //上传过程中的回调函数
                progressall: function (e, data) {

                    var progress = parseInt(data.loaded / data.total * 100, 10);

                    $(".bar").text(progress + '%');

                    $('#progress').val(progress);

                },
                autoUpload:true,
            });
        });




    </script>

</body>
</html>